<template>
  <div id="Distribution" style="height: 450px;width: 500px"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import request from "../../api/request";
import {ElLoading} from "element-plus/es";
import {getRecords} from "@/api/Data";


onMounted(() => {
  getData()
})

const abscissa = ref([] as any)
const money = ref([] as any)


/*const abscissa1 = ref(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '123'])*/

function getData() {
  getRecords().then((response: any) => {
    abscissa.value = []
    money.value = []
    response.data.forEach((item: any) => {
      abscissa.value.push(item.accessTime)
      money.value.push(item.count)
    })

    getChart()
  })
}

function getChart() {
  type EChartsOption = echarts.EChartsOption
  var chartDom = document.getElementById('Distribution')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;

  option = {
    title: {
      text: '每日访问人数统计'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: abscissa.value.slice(0, 10),//['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
      inverse: true

    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      position: 'top'

    },
    series: [
      {
        //name: '2011',
        type: 'line',
        data: money.value.slice(0, 10)// [18203, 23489, 29034, 104970, 131744, 630230]
      },
      /* {
         name: '2012',
         type: 'bar',
         data: [19325, 23438, 31000, 121594, 134141, 681807]
       }*/
    ]
  };

  option && myChart.setOption(option);

}

</script>

<style scoped>

</style>